import {
  LockOutlined,
  UserOutlined,
} from '@ant-design/icons';
import {
  LoginFormPage,
  ProConfigProvider,
  ProFormText,
} from '@ant-design/pro-components';
import { message, theme } from 'antd';
import { useEffect, useState } from 'react';
import style from './Login.module.scss'
import { getCaptchaApi, loginApi } from '../../services'
import type { LoginParams } from '../../types/services'
import { useNavigate } from 'react-router-dom'
import { useDispatch } from 'react-redux'
import { getUserInfoAction } from '../../store/models/user'
import type { AppDispatch } from '../../store'

const Page = () => {
  const { token } = theme.useToken()
  const navigate = useNavigate()
  const dispatch: AppDispatch = useDispatch()

  const onFinish = async (values: LoginParams) => {
    try {
      const res = await loginApi(values)
      if (res.data.code === 200) {
        message.success('登录成功！')
        localStorage.setItem('token', res.data.data.token)
        // 调用用户信息接口
        dispatch(getUserInfoAction())
        navigate('/')
      } else if (res.data.code === 1005) {
        message.error('验证码过期！')
        getCaptcha()
      } else {
        message.error(res.data.msg)
      }
    } catch(e) {
      console.log(e)
    }
  }

  const [captchaImg, setCaptcha] = useState('')

  const getCaptcha = async () => {
    try {
      const res = await getCaptchaApi()
      console.log(res.data.data.code)
      setCaptcha(res.data.data.code)
    } catch(e) {
      console.log(e)
    }
  }
  
  useEffect(() => {
    getCaptcha()
  }, [])


  return (
    <div
      style={{
        backgroundColor: 'white',
        height: '100vh',
      }}
    >
      <LoginFormPage
        backgroundImageUrl="https://mdn.alipayobjects.com/huamei_gcee1x/afts/img/A*y0ZTS6WLwvgAAAAAAAAAAAAADml6AQ/fmt.webp"
        backgroundVideoUrl="https://gw.alipayobjects.com/v/huamei_gcee1x/afts/video/jXRBRK_VAwoAAAAAAAAAAAAAK4eUAQBr"
        title="后台管理系统"
        containerStyle={{
          backgroundColor: 'rgba(0, 0, 0,0.65)',
          backdropFilter: 'blur(4px)',
        }}
        subTitle="全球最大的代码托管平台"
        onFinish={onFinish}
      >
        <ProFormText
          name="username"
          fieldProps={{
            size: 'large',
            prefix: (
              <UserOutlined
                style={{
                  color: token.colorText,
                }}
              />
            ),
          }}
          placeholder={'用户名'}
          rules={[
            {
              required: true,
              message: '请输入用户名!',
            },
          ]}
        />
        <ProFormText.Password
          name="password"
          fieldProps={{
            size: 'large',
            prefix: (
              <LockOutlined
                style={{
                  color: token.colorText,
                }}
              />
            ),
          }}
          placeholder={'密码'}
          rules={[
            {
              required: true,
              message: '请输入密码！',
            },
          ]}
        />
        <div className={style.codeItem}>
          <ProFormText
            name="code"
            fieldProps={{
              size: 'large',
              prefix: (
                <UserOutlined
                  style={{
                    color: token.colorText,
                  }}
                />
              ),
            }}
            placeholder={'验证码'}
            rules={[
              {
                required: true,
                message: '请输入验证码!',
              },
            ]}
          />
          <div className={style.codeImg} onClick={getCaptcha}>
            <img src={captchaImg} alt="" />
          </div>
        </div>
      </LoginFormPage>
    </div>
  );
};

export default () => {
  return (
    <ProConfigProvider dark>
      <Page />
    </ProConfigProvider>
  );
};